<template>
    <div class="box" style="height: 100%;">
      <el-scrollbar>
        <div v-if="state.data.length > 0" class="item m-b10" v-for="(item, index) in state.data" :key="index">
            <div class="title">{{ item.userName }}</div>
            <el-progress :percentage="item.unWrite" color="#D4AE85">
                <span style="cursor: default;">{{item.unWrite}}</span>
            </el-progress>
        </div>
        <el-empty class="empty" v-else/>
      </el-scrollbar>
    </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import {ElProgress } from "element-plus";
import {cockpitApi} from "@/api/investment";
import {ElEmpty,ElScrollbar} from "element-plus";

const props = defineProps({
    year:{
        type:String,
        default:()=>{
            let date = new Date(); // 获取时间
            return  date.getFullYear() // 获取年
        }
    }
});

const state = reactive({
    data: [],
});

const handel = () => {};

/**
 * 项目任务年度逾期情况
 */
const getWeeklyDepartmentUnWriteCount = (year) => {
    cockpitApi.getWeeklyDepartmentUnWriteCount({year:year}).then(res=>{
        if(res.code === '200'){
            state.data = res.data;
        }
    });
}

/**
 * 搜索
 */
const onSearch = () => {
    getWeeklyDepartmentUnWriteCount(props.year);
}

defineExpose({
    onSearch
});

onMounted(() => {
    getWeeklyDepartmentUnWriteCount(props.year);
});
</script>

<style lang="scss" scoped>
.box {
  padding: 10px 20px;
  .title {
    color: #333333;
    font-size: 12px;
  }
  overflow-x: hidden;
  overflow-y: hidden;

  .empty{
    margin-top: -30px;
  }
}
</style>
